<template>
  <el-container>
    <el-header>
      <router-link to="/home" class="logo">
        <img src="../assets/logo.png" alt="logo" />
        <span>电商后台管理</span>
      </router-link>
      <!-- 鼠标放上去的文字提示信息 -->
      <el-tooltip
        effect="dark"
        content="退出登录"
        placement="bottom"
        :enterable="false"
      >
        <el-button
          type="danger"
          icon="el-icon-switch-button"
          @click="logout"
        ></el-button>
      </el-tooltip>
    </el-header>
    <el-container>
      <!-- 侧边栏 -->
      <el-aside :width="iscollapse ? '64px' : '200px'">
        <!-- 侧边菜单栏 unique-opened同时只展开一个下拉栏,collapse是否折叠菜单栏,collapse-transition是否开启折叠动画,router开启菜单路由,default-active当前激活菜单的index值 -->
        <el-menu
          active-text-color="rgb(64,158,255)"
          unique-opened
          :collapse="iscollapse"
          :collapse-transition="false"
          router
          :default-active="activePath"
        >
          <i
            :class="[
              iscollapse ? 'el-icon-arrow-right' : 'el-icon-arrow-left',
              'toggle-btn',
            ]"
            @click="iscollapse = !iscollapse"
          ></i>
          <!-- 一级菜单start -->
          <el-submenu
            v-for="menu in menuList"
            :key="menu.id"
            :index="menu.order + ''"
          >
            <!-- 一级菜单模板 -->
            <template slot="title">
              <!-- 一级菜单图标 -->
              <i :class="menuIcon[menu.id]"></i>
              <!-- 一级菜单标题 -->
              <span>{{ menu.authName }}</span>
            </template>
            <!-- 二级菜单start -->
            <!-- 二级菜单选项 -->
            <el-menu-item
              v-for="item in menu.children"
              :key="item.id"
              :index="item.path"
              @click="savePath(item.path)"
            >
              <!-- 二级菜单模板 -->
              <template slot="title">
                <!-- 二级菜单图标 -->
                <i class="el-icon-menu"></i>
                <!-- 二级菜单标题 -->
                <span>{{ item.authName }}</span>
              </template>
            </el-menu-item>
            <!-- 二级菜单end -->
          </el-submenu>
          <!-- 一级菜单end -->
        </el-menu>
      </el-aside>
      <!-- main内容主体部分 -->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
// 导入vuex中的mapstate和mapMutations方法
import { mapState, mapMutations } from 'vuex'
export default {
  data() {
    return {
      // 左侧菜单列表
      menuList: [],
      // 是否折叠左侧菜单
      iscollapse: false,
      // 根据id设置左侧菜单icon图标
      menuIcon: {
        125: 'el-icon-user',
        103: 'el-icon-setting',
        102: 'el-icon-goods',
        101: 'el-icon-shopping-cart-full',
        145: 'el-icon-pie-chart',
      },
      // 当前激活菜单的path
      activePath: '',
    }
  },
  methods: {
    ...mapMutations(['setToken']),
    logout() {
      // 清除sessionStorage中的token
      window.sessionStorage.clear()
      // 清除vuex中的token
      this.$store.commit('setToken', '')
      // 编程式导航跳转到login页面
      this.$router.push('/login')
    },
    // 获取菜单栏
    async getmenu() {
      // console.log(this.$route.path.split('/')[2])
      const { data } = await this.$http.get('/menus')
      // console.log(data)
      // 判断是否成功获取左侧菜单栏
      if (data.meta.status !== 200) {
        this.$message.error(data.meta.msg)
        this.logout()
        return
      }
      // 将获取到的数据挂载到data中的menuList上
      this.menuList = data.data
      // console.log(this.menuList)
    },
    // 保存当前激活的path
    savePath(path) {
      window.sessionStorage.setItem('activePath', path)
      this.activePath = path
    },
  },
  computed: {
    ...mapState(['Storetoken']),
  },
  created() {
    // 获取菜单栏
    this.getmenu()
    // 页面加载时候获取当前path并调用savePath存取到sessionStorage中
    this.savePath(this.$route.path.split('/')[2])
    // 页面加载时候取出sessionStorage中激活的path赋值给data中的activePath
    this.activePath = window.sessionStorage.getItem('activePath')
  }
}
</script>

<style lang="less" scoped>
.el-container:nth-of-type(1) {
  background-color: rgb(240, 246, 255);
  height: 100%;
  overflow: hidden;
  // 顶部区域
  .el-header {
    background-color: rgb(64, 158, 255);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.2em;
    .logo {
      height: 50px;
      display: flex;
      align-items: center;
      text-decoration: none;
      color: #fff;
      img {
        height: 50px;
      }
    }
  }
  // 左侧菜单区域
  .el-aside {
    background-color: #fff;
    border-right: 1px solid #e6e6e6;
    transition: all 0.3s ease-in;
    overflow: hidden;
    .el-menu {
      border-right: none;
      height: 100%;
      box-sizing: border-box;
      /* 折叠左侧菜单栏按钮  */
      .toggle-btn {
        width: 50px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgb(64, 158, 255);
        font-size: 1.5em;
        box-sizing: border-box;
        color: #eee;
        border-radius: 10px;
        position: absolute;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        cursor: pointer;
      }
    }
  }
  // 主体部分
  .el-main {
    overflow-y: hidden;
    padding: 0;
  }
}
</style>
